
import { reactive } from 'vue'

import type {
  IFromProps, // 表单组件的属性
  IRuleMeta, // 验证
  IFormColShow, // 子组件的联动
  ISubs, // 分栏
  IFromMeta // 表单控件需要的 meta
} from '../../types/30-form'

import type { IFormItemList } from '../../types/20-form-item'

/**
 * 一个字段占据几个 格子
 */
type FormColSpan = {
  [id: number]: number
}

/**
 *  处理一个控件占用几个 格子 的需求
 * @param formColCount 表单控件的列数
 * @param itemMeta 表单子控件的 meta
 * @returns 
 */
export const getColSpan = (formColCount: number, itemMeta: IFormItemList ) => {
  // 确定一个组件占用几个格子
  const formColSpan = reactive<FormColSpan>({})

  // 根据配置里面的colCount，设置 formColSpan
  const setFormColSpan = () => {
    // const formColCount = formColCount // 表单的列数
    const moreColSpan = 24 / formColCount // 一个控件默认占多少格子
    // 表单子控件的属性，用于获取一个控件占几份。

    // 遍历表单子控件属性
    for (const key in itemMeta) {
      const m = itemMeta[key]
      if (typeof m.colCount === 'number') {
        // 设置了一个控件占的份数
        if (formColCount === 1) {
          // 单列
          formColSpan[m.columnId] = (m.colCount >= 1) ? 
            moreColSpan : // 一个控件最大占24格子
            moreColSpan / (0 - m.colCount) // 多控件占一行， 24/控件占的份数
        } else {
          // 多列
          formColSpan[m.columnId] =  (m.colCount < 1) ?
            moreColSpan : // 多控件占一行的控件视为占一份
            moreColSpan * m.colCount // 格子数 * 份数
        }
      } else {
        // 没有设置，默认占一行
        formColSpan[m.columnId] = moreColSpan
      }
    }
  }

  setFormColSpan()

  return {
    formColSpan,
    setFormColSpan
  }
}